<template>
	<view class="page">
<!-- <swiper previous-margin='50rpx' next-margin='50rpx' @change="swiperChange()" style='height:{{swiperH}};'  indicator-active-color="#fff" indicator-color ="rgba(255,255,255,.7)"  indicator-dots  autoplay  circular>
  <swiper-item v-for="(item,index) in initData.banner" :key="index" >
    <image :class='le-img nowIdx==index?"le-active":""}}' @load='getHeight' :src='item.pic' :style='height:{{swiperH}}; '></image>
  </swiper-item>
</swiper> -->
		<swiper class="swiper"   @change="swiperChange"   circular="true" indicator-dots="true" indicator-color="#fff" indicator-active-color="#000"	>
			<swiper-item   class="le-img swiper-item" v-for="(item,index) in initData.banner" :key="index"  :item-id="index" :style="'background:'+item">
           <image :src="item.pic"></image>
       </swiper-item>
		</swiper>
    <view class="topbar row">
      <view class="item"  :class="type==1 ? 'cur' : '' " @tap="tagetType(1)" >视频</view>
      <view class="item"  :class="type==2 ? 'cur' : '' " @tap="tagetType(2)" >岗位</view>
      <view class="item"  :class="type==3||type==4?'cur':'' " @tap="tagetType(3)" >知识分享</view>
    </view>
    <view class="hr"></view>
    <view class="filtratebar row"  v-if="type==1" >
      <view class="" v-if="type=='3'" @tap="tagetSharingType">{{sharingType?"职场资讯":"职场问答"}}
        <text class="iconfont icon-xia"></text>
      </view>
      <view :class="videoType==1?'cur':''"  @tap="tagetVideoType(1)"  >最新</view>
      <view :class="videoType==2?'cur':''"  @tap="tagetVideoType(2)"  >热门</view>
      <!-- <view class="{{videoType==3?'cur':''}}" wx:if="{{type==1}}"  bindtap="tagetVideoType"  data-videotype="3">关注</view> -->
      <view class="filtrate">筛选 
        <text class="iconfont icon-xia" ></text>
      </view>
    </view>
    <videolist :left="left" :right="right"></videolist>
    <!-- <view class="filtratebar row"   wx:if="{{type==2}}">
      <view class="{{videoType==1?'cur':''}}" bindtap="tagetVideoType" data-videotype="1">最新</view>
      <view class="{{videoType==2?'cur':''}}" bindtap="tagetVideoType" data-videotype="2">热门</view>
      <view class="filtrate">
        筛选
        <text class="iconfont icon-xia"></text>
      </view>
    </view> -->
    <!-- <view class="wdsx"  wx:if="{{type==3||type==4}}">
      <view class="sxkuang" wx:if="{{wdsx==1||wdsx==3}}"  data-wdsx="0"  bindtap="wdsx">
        <view class="filtratebar topp row" catchtap="returnfalse">
          <view class="{{wdsx==3?'filtrates':''}}" bindtap="tagetSharingType">
            {{sharingType?"职场资讯":"职场问答"}}
            <text class="iconfont icon-xia"></text>
          </view>
          <view class="{{videoType==1?'cur':''}}" bindtap="tagetVideoType" data-videotype="1">最新</view>
          <view class="{{videoType==2?'cur':''}}" bindtap="tagetVideoType" data-videotype="2">热门</view>
          <view class="filtrate {{wdsx==1?'filtrates':''}}"  bindtap="wdsx" data-wdsx="0">
            筛选
            <text class="iconfont icon-xia"></text>
          </view>
        </view>
        <view class="shaixuan">
          <view class="item row {{sharingType?'cur':''}}"  bindtap="zcqh" >
            职场问答 <icon type="success_no_circle" size="20" wx:if="{{sharingType}}"   color="#0082e4" /> </view>
          <view class="item row {{!sharingType?'cur':''}}"  bindtap="zcqh">
            职场资讯  <icon type="success_no_circle" size="20"    wx:if="{{!sharingType}}" color="#0082e4"/> </view>
        </view>
      </view>
      <view class="filtratebar  row" wx:if="{{wdsx==0}}">
        <view class=""  bindtap="wdsx" data-wdsx="3">
          {{sharingType?"职场问答":"职场资讯"}}
            <text class="iconfont icon-xia"></text>
        </view>
        <view class="{{videoType==1?'cur':''}}" bindtap="tagetVideoType" data-videotype="1">最新</view>
        <view class="{{videoType==2?'cur':''}}" bindtap="tagetVideoType" data-videotype="2">热门</view>
        <view class="filtrate" bindtap="wdsx" data-wdsx="1">
          筛选
          <text class="iconfont icon-xia"></text>
        </view>
      </view>
    </view> -->
	</view>
</template>
<script>
  import videolist from "../../components/video.vue"
  export default {
   components: {videolist},
	data() {
		return {
      type:1,
      videoType:1,
      current:0,
			title: 'Hello',
			scrollTop: 0,
			old: {
				scrollTop: 0
			},
      imgList:[
        1,2,3
      ],
      colorList:[
        "#faa","#aaf","#afa"
      ],
      color:"#aaa",
      asp:10,
      initData:"",
      jobList:"",
      askList:"",
      zczx:"",
        
		};
	},
	onLoad() {
    this.$emit('showbox','the msg');
  
    this.asp="xasxasx"
   
    // let arr=[1,2,3,4]
    // let arr2=[2,3,4]
    // let arr3=   arr.concat(arr2)
    // let arr3=[...arr,...arr2]
    this.initDatas({
          apiType:1,
          order:1,
          type:"",
          flg:true
        })
  },
	methods: {
    tagetType(type){
     this.type=type
    },
    tagetVideoType(videoType){
      this.videoType= videoType
    },
      /**
       * 
       * @param {
       *      apiType 1 视频 2 岗位 3 问答 4 分享
       *      order 1 最新 2 热门 3 关注 
       *      type 筛选
       *      flg  是否初始化
       * } 
       * @param opt 
       */
      initDatas(opt){
        const urlList=[
          "api.php/index",
          "api.php/work",
          "api.php/Question/question_list",
          "api.php/news"
        ]
        const retur=[
            "initData",
            "jobList",
            "askList",
            "zczx"
        ]
      let flg = opt.flg
      let page = flg ? 1 : this.data.page+1
       this.req({
         url: urlList[opt.apiType-1],
         data:{
           order:opt.order,
           page,
           type: opt.type,
         },
         callback:(res)=>{
            wx.stopPullDownRefresh()
           if (opt.apiType==1) {
            console.log(res);
              let left = flg ? [] : this.left
              let right = flg ? [] : this.right
              let lh = flg ? 0 : this.lh
              let rh = flg ? 0 : this.rh
              for (let i = 0; i < res.result.video.length; i++) {
                const element = res.result.video[i];
                lh > rh ? right = [...right, element] : left = [...left, element]
                lh > rh ? rh += element.height : lh += element.height
              }
              this.initData= res.result
              this.left=left
              this.right=right
              this.lh=lh
              this.rh=rh
              //   page,
              //   right,
                
           }else{
             this.setData({
               [retur[opt.apiType - 1]]: res.result
             })
           }
           
         }
       })
    
      },
    
    
    
    
    
    
    fun1(){
      
    },
     swiperChange(current) {
    //  event.detail = {current: current, source: source}
       console.log(123);
       console.log(this.current);
       
     
    },
    fun2(){
      this.fune
    }
  }
};
</script>

<style lang="less">
.page {
  .swiper{
    width: 750rpx;
    .swiper-item{
      width: 100%;
      image{
        width:100%;
      }
    }
  }
  .topbar{
    width: 330rpx;
    margin-left: 210rpx;
    justify-content: space-between;
    font-family: PingFang-SC-Medium;
    font-size: 28rpx;
    color: #97a2b2;
    margin-top: 50rpx;
    .item{
      border-bottom: 6rpx solid #fff;
      padding-bottom: 30rpx;
      
    }
    .cur{
      color: #0082e4;
      border-bottom-color: #0082e4;
    }
  }
  .filtratebar{
    height: 100rpx;
    padding: 0 20rpx;
    font-family: PingFang-SC-Medium;
    font-size: 28rpx;
    font-weight: normal;
    font-stretch: normal;
    line-height: 20rpx;
    letter-spacing: 0rpx;
    color: #333333;
    view{
      margin-right: 50rpx;
    }
    .filtrate{
      margin-left: auto;
      margin-right: 0rpx;
    }
    .cur{    
      color:#0082e4;
    }

  }
 
 




  
}
</style>
